<template>
  <div class="relative h-screen bg-white dark:bg-zinc-800 text-center xl:bg-zinc-200">
    <!-- 头部 -->
    <header-vue></header-vue>
    <!-- 表单 -->
    <div
      class="block xl:py-4 px-3 mt-4 dark:bg-zinc-800 xl:bg-white xl:w-[388px] xl:dark:bg-zinc-900 xl:m-auto xl:mt-8 xl:rounded-sm xl:shadow-lg">
      <h3 class="hidden mb-2 font-semibold text-base text-main dark:text-zinc-300 xl:block">
        账号登录
      </h3>
      <!-- 表单 -->
      <vee-form @submit="onLoginHandler">
        <!-- 用户名 -->
        <vee-field
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
          type="text" name="username" placeholder="用户名" v-model="loginForm.username" autocomplete="on"
          :rules="validateUsername" />
        <!-- name属性用来和输入框绑定 -->
        <vee-error-message class="text-sm block mt-0.5 text-red-600 text-left" name="username" />
        <!-- 密码 -->
        <vee-field
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900"
          type="password" name="password" placeholder="密码" v-model="loginForm.password" autocomplete="on"
          :rules="validatePassword" />
        <!-- name属性用来和输入框绑定 -->
        <vee-error-message class="text-sm text-red-600 mt-0.5 block text-left" name="password" />
        <!-- 跳转按钮 -->
        <div class="pt-1 pb-3 leading-[0px] text-right">
          <a @click="onToReg"
            class="inline-block px-1 text-zinc-400 text-right dark:text-zinc-600 hover:text-zinc-600 dark:hover:text-zinc-400 text-sm duration-300 cursor-pointer">去注册
          </a>
        </div>
        <!-- 登录按钮 -->
        <m-button class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-800" :isActiveAnim="false"
          :loading="loading">登录</m-button>
      </vee-form>
      <!-- 第三方登录 -->
      <div class="flex justify-around mt-4">
        <!-- qq -->
        <m-svg-icon class="w-4 cursor-pointer" name="qq"></m-svg-icon>
        <!-- weixin -->
        <m-svg-icon class="w-4 cursor-pointer" name="wexin"></m-svg-icon>
      </div>
    </div>
    <slider-captcha-vue v-if="isSliderCaptchaVisiable" @close="isSliderCaptchaVisiable = false"
      @success="onCaptchSuccess"></slider-captcha-vue>
  </div>
</template>

<script setup>
import headerVue from '../components/header.vue'
import SliderCaptchaVue from './slider-captcha.vue'
import { validateUsername, validatePassword } from '../validate'
import {
  Form as VeeForm,
  Field as VeeField,
  ErrorMessage as VeeErrorMessage
} from 'vee-validate'
import { ref } from '@vue/reactivity'
import { useStore } from 'vuex'
import { LOGIN_USERNAME } from '@/constants'
import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()

// 控制人类行为验证显示
const isSliderCaptchaVisiable = ref(false)

// 人类行为验证成功
const onCaptchSuccess = () => {
  isSliderCaptchaVisiable.value = false
  // 进行登陆操作
  onLogin()
}
// 用户信息
const loginForm = ref({
  username: 'LGD_Sunday',
  password: '123123'
})

// 登陆
const loading = ref(false)
const onLogin = async () => {
  loading.value = true
  try {
    store.dispatch('user/login', {
      ...loginForm.value,
      loginType: LOGIN_USERNAME
    })
  } finally {
    loading.value = false
  }
  router.push('/')
}
// 提交登录
const onLoginHandler = () => {
  isSliderCaptchaVisiable.value = true
}

// 点击去注册
const onToReg = () => {
  store.commit('app/changeRouterType', 'push')
  router.push('/register')
}
</script>

<style lang="scss" scoped></style>
